<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="width: 100%;">
    <div style="width: 100%;">
      <div style="display: flex; padding: 1px 15px;align-items: center;">
        <!-- 组件1 : 新增按钮 + 菜单名称 -->
        <!-- <el-button type="primary" @click="add">新建</el-button> -->
        <span style="margin-left: 10px; font-size: 20px;">我的试卷</span>
        <div style="margin-left: auto;margin-right: auto;">
          <!-- 搜索框 -->
          <ISearch :fieldsConfig="searchConfig || []" @searchCallBack="searchCallBack"></ISearch>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider border-style="dotted" />

    <div style="display: flex; height: 100vh;">
      <!-- 表格列表 -->
      <div style="display: flex;flex-direction: column; height: auto;position: relative; width: 100%;flex: 1;">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
          @row-click="(row: ExaminaionPaperForm) => router.push({ path: '/examinaion-exam/add', query: { id: row.id , title:row.title} })">
          <el-table-column type="selection" disabled width="25" />
          <el-table-column prop="" label="" width=30 />
          <el-table-column prop="title" label="试卷名称" width=600 />
          <el-table-column prop="belongsUserName" label="所属人" width=200 />
          <el-table-column prop="createTime" label="创建日期" width=200 />
          <el-table-column prop="status" label="状态" width=100 />
          <el-table-column prop="score" label="卷面分" />
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 5px; margin-bottom: 5px;" v-if="tableData.length > 0">
          <IdooPagination :param="initPaginationParam" style="float:right ;margin-right: 25px;"
            @click-call-back="paginationCallBack"></IdooPagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import IdooPagination from '@/components/base/pagination/index.vue'
import ISearch from '@/components/base/search/index.vue'
import type { PaginationStructure } from '@/components/base/pagination';
import { OrderEnums } from '@/types/wrapper-enums';
import type { QueryCondition, QueryPage, QueryWrapper } from '@/types/wrappertypes';
import type { TableFieldType } from '@/types/table-configtypes';
import type { ExaminaionPaperForm } from '@/types/examinaion/types';
import { _getExaminaionPaperTableConfigeration, _getExaminaionPaperTableList } from '@/api/generic/examinaion/examinaion-paper-api';
import router from '@/router';
//列表勾选得内容
const multipleSelection = ref<ExaminaionPaperForm[]>([]);
const tableData = ref<ExaminaionPaperForm[]>([]);
//多功能搜索框内容配置
const searchConfig = ref<TableFieldType[]>([]);
//表格列内容配置
const tableColumnConfig = ref<TableFieldType[]>([]);

//初始化分页参数
const initPaginationParam = ref<PaginationStructure>({ pageNum: 1, pageSize: 20, startNum: 1, totalNum: 0 });
//初始化查询条件
const queryWrapperCondition = ref<QueryWrapper>({
  page: initPaginationParam.value,//分页参数
  condition: [], //数据参数
  sort: [{ filed: 'create_time', orderType: OrderEnums.WRAPPER_ORDER_DESC }] //排序参数
});
//表格勾选
const handleSelectionChange = (val: []) => {
  console.log(val);
  multipleSelection.value = val
}

//搜索框回调
const searchCallBack = (callbackItem: QueryCondition[]) => {
  console.log("搜索回调", callbackItem)
  initPaginationParam.value.startNum = 1
  initPaginationParam.value.pageNum = 1
  queryWrapperCondition.value.page = initPaginationParam.value;
  queryWrapperCondition.value.condition = callbackItem;
  console.log("wrapper:", queryWrapperCondition.value)
  refreshTableData();
}
//分页组件回调
const paginationCallBack = (obj: QueryPage) => {
  console.log(obj);
  if (initPaginationParam.value && obj.pageNum !== undefined) {
    initPaginationParam.value.pageNum = obj.pageNum;
    initPaginationParam.value.startNum = (obj.pageNum - 1) * initPaginationParam.value.pageSize + 1;
  }
  refreshTableData();
}

onMounted(async () => {
  //获取列表页配置项
  const configer = await _getExaminaionPaperTableConfigeration();
  console.warn(configer);
  if (configer.code == 200) {
    const res = configer.data;
    searchConfig.value = res.selectorFieldsConfig || [];
    tableColumnConfig.value = res.tableColumnsConfig || [];
  }
  nextTick(() => {
    refreshTableData();
  });
});


const refreshTableData = async () => {
  console.log("wrapper:", queryWrapperCondition.value);
  try {
    const res = await _getExaminaionPaperTableList(queryWrapperCondition.value);
    console.log(res);
    if (res.code == 200 && res.message == 'success') {
      tableData.value = Array.isArray(res.data.rows) ? res.data.rows : [res.data.rows];
      if (initPaginationParam.value) {
        initPaginationParam.value.totalNum = res.data.total;
      }
      console.error(initPaginationParam.value);
    }
  } finally { }
}
</script>

<style scoped>
:deep(.el-divider--horizontal) {
  margin: 20px 0px 0px !important;
}

.main-left-area {
  border-right: 1px solid #dcdfe6;
  width: 300px;
  min-height: 400px;
  overflow: outo;
}

.card {
  flex-basis: 400PX;
  /* 考虑 10px 的间隙，每个卡片占 20% 宽度 */
  height: 110px;
  box-sizing: border-box;
}


:deep(.el-card__body) {
  justify-content: normal !important;
  align-items: normal m !important
}

.search-operation-container {
  height: 32px;
  display: flex;
  align-items: center;
}
</style>
